<template>
  <div class="rank" ref="rank">
    <scroll :data="topList" class="toplist" ref="toplist">
      <ul>
        <li class="item" v-for="(item, index) in topList" :key="index" :data-id="item.id" @click="selectItem(item)">
          <div class="icon">
            <img v-lazy="item.picUrl" alt="" width="100" height="100">
          </div>
          <div class="intensitylist">
            <ul class="songlist">
              <li class="song" v-for="(item, index) in item.songList" :key="index"><span class="songIndex">{{index+1}}</span><span class="songSinger">{{item.songname}} - {{item.singername}}</span></li>
            </ul>
          </div>
        </li>
      </ul>

      <div class="loading-container" v-show="!topList.length">
        <loading></loading>
      </div>
    </scroll>

    <transition name="slide">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import Scroll from 'base/scroll/scroll'
import { getTopList } from 'api/rank'
import { ERR_OK } from 'api/config'
import { mapMutations } from 'vuex'
import Loading from 'base/loading/loading'
import { playlistMixin } from 'common/js/mixin'
export default {
  mixins: [playlistMixin],
  data () {
    return {
      topList: []
    }
  },
  created () {
    this._getTopList()
  },
  methods: {
    _getTopList () {
      getTopList()
        .then((result) => {
          // console.log(result)
          if (result.code === ERR_OK) {
            this.topList = result.data.topList
          }
        })
        .catch((error) => {
          console.error(error)
        })
    },
    // 用户点击排行榜item
    selectItem (item) {
      // console.log(item)
      this.$router.push({name: 'TopList', params: {id: item.id}})
      this.setTopList(item)
    },

    handlePlaylist (playlist) {
      const bottom = playlist.length ? '60px' : ''
      this.$refs.rank.style.bottom = bottom
      this.$refs.toplist.refresh()
    },

    ...mapMutations({
      setTopList: 'SET_TOP_LIST'
    })
  },
  components: { Scroll, Loading }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
  @import '~common/stylus/variable';
  .rank
    position: fixed;
    top: 88px;
    bottom: 0;
    width: 100%;
    .toplist
      width 100%;
      height 100%;
      overflow hidden;
      .item
        display flex;
        padding 0 20px;
        padding-top 20px;
        .icon
          width 100px;
          height 100px;
        .intensitylist
          flex 1;
          background-color $color-highlight-background;
          color $color-text-d;
          font-size $font-size-small;
          padding 10px 0;
          padding-left 20px;
          .songlist
            width 100%;
            height 100%;
            display flex;
            flex-direction column;
            justify-content space-around;
            .song
              display flex;
              align-items center;
              .songIndex
                margin-right 10px;
              .songSinger
                display: -webkit-box;
                overflow: hidden;
                white-space: normal!important;
                text-overflow: ellipsis;
                word-wrap: break-word;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                line-height 1.4;

      .loading-container
        position absolute
        width 100%;
        top 50%;
        transform translateY(-50%);
    .slide-enter-active, .slide-leave-active
      transition all .4s;
    .slide-enter, .slide-leave-to
      transform translate3d(100%, 0, 0)
</style>
